<template>
  <div class="main">
    <el-container>
      <el-container>
        <!-- 主体部分 -->
        <el-main style="line-height:35px">
          <!-- 查询部分 -->
          <h2 style="line-height: 20px;width:100%;text-align:left">颜色管理</h2>

          <el-card class="box-card" style="margin-top:20px">
            <div>
              <div style="line-height:20px">
                <strong style="float:left">颜色管理</strong>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="addDialogFormVisible = true"
                >新增颜色</el-button>

                <!-- 新增类别弹出框 -->
                <el-dialog title="新增颜色" :visible.sync="addDialogFormVisible">
                  <el-form :model="addForm">
                    <el-form-item label="颜色" :label-width="formLabelWidth">
                      <el-input v-model="addForm.color" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                  </div>
                </el-dialog>
              </div>
              <!-- 显示内容表单 -->
              <div class="clear"></div>
              <el-divider></el-divider>
            </div>
            <el-table :data="tableData" border style="width: 100%;height:100%" empty-text="暂无数据">
              <el-table-column fixed prop="idcolor" label="序号" height="30px"></el-table-column>
              <el-table-column fixed prop="color" label="颜色" height="30px"></el-table-column>
              <el-table-column fixed="right" label="操作" height="30px">
                <template slot-scope="scope">
                  <el-button type="text" @click="open(scope.row)" size="small">删除</el-button>
                  <el-button type="text" @click="editor(scope.row)" size="small">编辑</el-button>
                  <!-- @click="editor(scope.$index, scope.row)" -->
                  <!-- 编辑弹出框 -->
                  <el-dialog
                    title="修改"
                    :visible.sync="editorDialogFormVisible"
                    :append-to-body="true"
                  >
                    <el-form :model="editorForm">
                      <el-form-item label="序号" :label-width="formLabelWidth" style="width:338px">
                        <el-input v-model="editorForm.idcolor" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="颜色" :label-width="formLabelWidth" style="width:338px">
                        <el-input v-model="editorForm.color" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="editorDialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="change">确 定</el-button>
                    </div>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */
export default {
  data() {
    return {
      formLabelWidth: "120px",
      addDialogFormVisible: false,
      tableData: [],
      editorDialogFormVisible: false,
      editorForm: {
        idcolor: "",
        color: ""
      },
      colorMenu: [
        {
          name: "白色",
          value: "白色"
        },
        {
          name: "黑色",
          value: "黑色"
        },
        {
          name: "灰色",
          value: "灰色"
        },
        {
          name: "蓝色",
          value: "蓝色"
        },
        {
          name: "黄色",
          value: "黄色"
        },
        {
          name: "红色",
          value: "红色"
        },
        {
          name: "粉色",
          value: "粉色"
        },
        {
          name: "绿色",
          value: "绿色"
        },
        {
          name: "紫色",
          value: "紫色"
        },
        {
          name: "其他",
          value: "其他"
        }
      ],
      addForm: {
        color: ""
      }
    };
  },
  created() {
    this.rendering();
  },
  methods: {
    rendering() {
      this.$axios({
        url: "/Color/getColor",
        methods: "get"
      }).then(res => {
        // console.log(res);
        this.tableData = res.data;
      });
    },
    open(row) {
      // console.log(row);
      this.$confirm("您确定要删除嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // console.log(row.id);
        this.$axios({
          url: "/Color/deleteColor",
          methods: "get",
          headers: { "content-type": "application/json" },
          params: { idcolor: row.idcolor }
        }).then(res => {
          // console.log(res);
          this.rendering();
          this.$message({
            type: "info",
            message: res.data.msg
          });
        });
      });
    },
    editor(row) {
      this.editorDialogFormVisible = true;
      this.editorForm.idcolor = row.idcolor;
      this.editorForm.color = row.color;
    },
    change() {
      this.editorDialogFormVisible = false;
      this.$axios({
        url: "/Color/updateColor",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: {
          idcolor: this.editorForm.idcolor,
          color: this.editorForm.color
        }
      })
        .then(res => {
          // console.log(res.data);
          this.$message({
            type: "info",
            message: res.data.msg
          });

          this.rendering();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改"
          });
        });
    },
    add() {
      this.addDialogFormVisible = false;
      this.$axios({
        url: "/Color/insertColor",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: {
          color: this.addForm.color
        }
      }).then(res => {
        // console.log(res.data);
        this.$message({
          type: "info",
          message: res.data.msg
        });
        this.rendering();
      });
      this.addForm.color = "";
    }
  }
};
</script>

<style>
</style>